<template>
	<view class="container">
		
		<view class="orderList">
			<view class="orderItem" v-for="item in orderList" :key="item.id">
				<view class="goods_img">
					<image :src="item.presell.image.file_url"
						mode="widthFix"></image>
				</view>
				<view class="goods_info">
					<view class="hd_title">{{item.presell.title}}</view>
					<view class="order_price">
						<text class="hd_price">定金：¥{{item.pay_price}}</text>
						<text class="num">x{{item.num}}</text>
					</view>
					<view class="create-time">{{item.create_time}}</view>
					<view class="btn_part">
						<view class="status_txt">{{item.statit}}</view>
						<view>
							<u-button @click.stop="gotoPay(item.id)" size="mini"
								:custom-style="{background:'#20cbd4',color:'#fff'}" v-if="item.show_pay_end == 1">支付尾款</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-modal v-model="modalShow" :show-cancel-button="true" title="支付方式"
					:cancel-style="{color:'#909399'}" @confirm="payConfirm">
			<view class="slot-content">
				<view class="payTime">
					<view>支付剩余时间：</view>
					<view>
						<u-count-down :font-size="25" color="#909399" 
							:separator-size="25" separator-color="#909399"
						:timestamp="3000"></u-count-down>
					</view>
				</view>
				<view class="modelPrice">¥{{pay_price}}
				</view>
				<u-cell-group :border="false">					
					<u-cell-item :border-bottom="false" icon="rmb-circle-fill" :icon-style="{color:'#fece0a'}"
					:icon-size="60" title="积分支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="yue" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<u-cell-item :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}" 
					:icon-size="60" title="微信支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="weixin" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
<!--  #ifndef MP-WEIXIN -->
					<u-cell-item :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}"
					:icon-size="60" title="支付宝支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="zhifubao" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
<!-- #endif -->
				</u-cell-group>
			</view>
		</u-modal>
				
		<u-modal width="80%" v-model="payPwdShow" :show-title="true"
		confirm-color="#20cbd4" :show-cancel-button="true" @confirm="payYE">
			<view class="modelContent">
				<view class="accountData">
					<text>交易密码：</text>
					<u-input v-model="payPassword" type="password"
						placeholder="请输入交易密码"/>
				</view>
			</view>
		</u-modal>
		
		<login-model ref="loginModel"></login-model>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {
		orderPay,
		orderPayZfb,
		orderPayGzh,
		orderPayh5,
		hjWxOrderPay,
		wxminiGetOpenid,
		presellOrderList,
		presellCreateOrder
	} from "@/common/api.js";
	export default {
		components: {
			empty,
			loginModel,
			hoverMenu
		},
		data() {
			return {
				modalShow:false,
				payPwdShow:false,
				payPassword:'',
				pay_price:0,
				order_id: 0,
				payType:"yue",
				pageStart: 1,
				orderList: []
			};
		},
		onShow() {
			this.selectOrder()
		},
		onReachBottom() {},
		methods: {
			selectOrder() {
				presellOrderList(this, {
					page: 1
				})
			},
			gotoPay(id){
				presellCreateOrder(this, {
					id: id
				})
			},
			payYE(){
				uni.showLoading({
					title: '支付中...'
				});
				this.payPwdShow=false;
				var pay_pwd=this.payPassword;
				this.payPassword="";
				orderPay(this,{pay_type:'yu_e',order_id:this.order_id,pay_pwd:pay_pwd,type:0})
			},
			settle(){
				var _this = this;
				_this.modalShow=false;
				console.log(_this.payType)
				if(_this.payType=='yue'){
					if(this.payPassword==""){
						this.payPwdShow=true;
					}else{
						this.payYE();
					}
					return;
				}
				uni.showLoading({
					title: '支付中...'
				});
				// #ifdef MP-WEIXIN
				if(uni.getStorageSync("openid")==""){
					uni.getSetting({
						success: function (a) {
							uni.getUserProfile({
								desc:'Wexin',  
								success: function (b) {
									 uni.login({
									    success (res) {
											uni.hideLoading();
									        if (res.code) {
												wxminiGetOpenid(_this,{code:res.code})
									        } else {
												_this.$refs.uToast.show({title: '授权获取失败',})
									        }
									    }
									})
								}
							});
						}
					});
				}
				if(uni.getStorageSync("openid")!="" && uni.getStorageSync("openid")!="undefined"){
					orderPay(this,{pay_type:'wx_mini',order_id:this.order_id,type:0})
				}
				// #endif
				// #ifdef APP-PLUS
					if(_this.payType=='zhifubao'){
						orderPayZfb(_this,{pay_type:'ali_h5',order_id:_this.order_id,type:0})
					}else{
						//汇聚App支付
						hjWxOrderPay(this,{pay_type:'wx_app',order_id:this.order_id,type:0})
					}
				// #endif
				// #ifdef H5
					let ua = window.navigator.userAgent.toLowerCase()
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						if(_this.payType=='zhifubao'){
							uni.hideLoading();
							_this.$refs.uToast.show({title: '微信浏览器无法用支付宝支付',})
						}else{
							orderPayGzh(_this,{pay_type:'wx_chat',order_id:_this.order_id,type:0})
						}
					}else{
						if(_this.payType=='zhifubao'){
							orderPayZfb(_this,{pay_type:'ali_h5',order_id:_this.order_id,type:0})
						}else{
							orderPayh5(_this,{pay_type:'wx_h5',order_id:_this.order_id,type:0})
						}
					}
				// #endif
			},
			radioChange(e) {
				this.payType = e;
			},
			payConfirm(){
				this.settle();
			},
		}
	};
</script>
<style>
	page {
		font-family: PingFang SC;
		background: #f6f6f6;
	}

	.orderItem {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.goods_img {
		position: absolute;
		width: 180rpx;
		height: 180rpx;
		overflow: hidden;
		left: 15rpx;
		top: 15rpx;
	}

	.goods_img image {
		width: 100%;
		height: 100%;
	}

	.orderItem .goods_info {
		margin-left: 200rpx;
		height: 178rpx
	}

	.hd_title {
		font-size: 32rpx;
		line-height: 40rpx;
		height: 40rpx;
		overflow: hidden;
		color: #222
	}

	.order_price {
		width: 100%;
		line-height: 40rpx;
		padding: 10rpx 0;
		position: relative;
	}

	.order_price .hd_price {
		font-size: 28rpx;
		color: #CE4032;
		line-height: 40rpx;
	}
	
	.order_price .num{
		float: right;
		color: #999;
		font-size: 26rpx;
		margin-right: 20rpx;
	}

	.create-time {
		font-size: 24rpx;
		line-height: 28rpx;
		color: #999;
	}

	.btn_part {
		display: flex;
		margin-right: 20rpx;
		justify-content: space-between;
	}
	
	.slot-content{
		padding: 20rpx 40rpx;
	}
	.payTime{
		padding: 0 40rpx;
		color: #909399;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}
	.modelPrice{
		color: #FA3534;
		font-size: 50rpx;
		font-weight: 650;
		padding: 0 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.copy{
		font-size: 24rpx;
		color: #888;
		background-color: #eee;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		margin-left: 30rpx;
		display: inline-block;
	}
	.u-radio{text-align: right;float:right !important}
	.modelContent{
		padding: 40rpx;
	}
	.accountData{
		padding: 15rpx 0 15px 200rpx;position: relative;
	}
	.accountData text{position: absolute;left:0;top:15px;display: inline-block;width:190rpx;text-align: right;}
	.accountData .u-input{border-bottom:0.5rpx solid #222;}
	.accountData .u-input input{min-width:260rpx}
	.bottomline{
		height: 1rpx;
	}
</style>
